<!--
 * @Author: your name
 * @Date: 2022-01-12 13:39:16
 * @LastEditTime: 2022-01-12 13:45:08
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \testHtmld:\SoftWareProject\mySoft\myVUETest\src\views\elementList.vue
-->
<template>
  <div>
    <div class="btnList">
      <el-button type="primary" @click="getComponent('Table')">表格相关
      </el-button>
      <el-button type="primary" @click="getComponent('TimeLine')">时间线
      </el-button>
      <el-button type="primary" @click="getComponent('DrawerBox')">抽屉
      </el-button>
    </div>

    <keep-alive>
      <transition enter-active-class="animated zoomInDown" leave-active-class="animated zoomOutDown" mode="out-in">
        <component :is="component"></component>
      </transition>
    </keep-alive>
  </div>
</template>

<script>
import Table from "@/components/elementList/Table.vue";
import TimeLine from "@/components/elementList/TimeLine.vue";
import DrawerBox from "@/components/elementList/DrawerBox.vue";

export default {
  name: "elementList",
  components: { Table, TimeLine, DrawerBox },
  data() {
    return {
      component: "",
    };
  },
  mounted() {
    //默认加载模糊查询
    this.component = "";
  },
  methods: {
    getComponent(str) {
      this.component = str;
    },
  },
};
</script>
<style scoped>
.dataIndex {
  height: 100%;
}
.btnList {
  width: 100%;
}
</style>
